/* eslint-disable no-undef */
import React from 'react';
// import Cesium from "cesium";

import './index.less';

import { getMapConfig, getWidgetConfig } from '../tool/api';
import { createMap, initStaticWidget } from '../tool/main';

export class CesiumMap extends React.PureComponent {
  constructor(props) {
    super(props);

    this.state = {
      mapDivId: 'mapView',
      mainMap: null,
      postInit: true,
      activeNav: '',
      activePage: '综合信息',

      imageUrl1: null,
      geeMetadata: null,
      curlayer: null,
    };
  }

  componentDidMount() {
    getMapConfig().then((data) => {
      const viewer = createMap(this.state.mapDivId, data);

      window.viewer = viewer; // 绑定到全局，widgets目录用

      // 开启深度检测
      viewer.scene.globe.depthTestAgainstTerrain = true;

      if (viewer && viewer.beforeWidgetChanged)
        viewer.beforeWidgetChanged = (a, b, c, d) => {
          console.log('beforeWidgetChanged', {
            a,
            b,
            c,
            d,
          });
        };
      if (viewer && viewer.afterWidgetChanged)
        (viewer.afterWidgetChanged = 'afterWidgetChanged'),
          (a, b, c, d) => {
            console.log({
              a,
              b,
              c,
              d,
            });
          };

      const intervalIndex = setInterval(() => {
        if (nwh3d) {
          clearInterval(intervalIndex);
          getWidgetConfig().then((widgetdata) => {
            console.log(widgetdata);
            initStaticWidget(viewer, widgetdata);
          });
        }
      }, 300);
    });
  }

  render() {
    const mapStyle = { height: '100%', width: '100%' };
    return (
      <div id="cesiumContainer" className="itemContainer bg-gis collapsed">
        <div id={this.state.mapDivId} style={mapStyle} className="appmap" />
      </div>
    );
  }
}

export default CesiumMap;
